import React, { Component } from 'react';
import {
  Text,
  View,
  StyleSheet,
  Image,
  Platform,
} from 'react-native';
import PxToDp from '../../utils/PxToDp';
import NavCon from './NavCon';
import Login from '../../containers/LoginContainer';

export default class SendSuccess extends Component {
  _backToLogin = () => {
    this.props.navigator.push({
      title: 'Login',
      component: Login,
    });
  }
  render() {
    return (
      <View style={style.flex}>
        <View style={style.header}>
          <NavCon backName="登录" currentTitle="忘记密码" onPress={() => this._backToLogin()} />
        </View>
        <View style={[style.flex, style.border_Top]}>
          <View style={style.imgline}>
            <Image style={[style.backIcon, style.marginTop]} source={require('../../img/login_ok.png')} />
          </View>
          <Text style={[style.sendword, style.marginTop, style.color2d]}>
            重置密码的链接已经发送到你的邮箱
          </Text>
          <Text style={[style.sendword, style.color00]}>
            请稍后查看
          </Text>
          <Text style={[style.textconfirm, style.marginTop]}>没收到电子邮件？</Text>
          <Text style={style.textconfirm}>检查你的垃圾邮件文件夹</Text>
        </View>
      </View>
    );
  }
}

const style = StyleSheet.create({
  header: {
    height: PxToDp(46),
    marginTop: Platform.OS === 'ios' ? 20 : 0,
  },
  flex: {
    flex: 1,
  },
  border_Top: {
    borderTopWidth: 1,
    borderStyle: 'solid',
    borderColor: '#E5E5E5',
  },
  backIcon: {
    width: PxToDp(72),
    height: PxToDp(72),
  },
  imgline: {
    height: PxToDp(72),
    alignItems: 'center',
    marginTop: PxToDp(42),
  },
  marginTop: {
    marginTop: 20,
  },
  color2d: {
    fontSize: 17,
    color: '#2D2E30',
  },
  color00: {
    fontSize: 17,
    color: '#000',
  },
  sendword: {
    height: PxToDp(24),
    textAlign: 'center',
    lineHeight: 24,
  },
  textconfirm: {
    height: 24,
    textAlign: 'center',
    color: '#BBBEC7',
  },
});

